<template>
<div class="login_div" v-if="!isLogin" v-loading="loading">
    <div class="login_code">
        <div class="lm_left">
            <img src="https://teacher-studio-app.oss-cn-hangzhou.aliyuncs.com/static/pc_v108/img/login_bj.ce4b4de9.png">
        </div>
        <div class="lm_right">
            <div class="lmr_div">
                <div class="lmrd_action">
                    <div class="lmrda_div" >
                        <span>扫码登录</span>
                    </div>
                
                </div>
                <div class="loginClass">

                    <div class="qrcode_img">
                        <canvas style="width:280px;height:280px" id="canvas"></canvas>
                    </div>
                    <div class="qrcode_desc">
                        <span>请使用微信扫描二维码登录</span>
                    </div>
                    <div class="qrcode_desc_bottom" @click="showChangeStudioDialog">
                        <span style="color:#888;font-size:12px;margin-right: 10px;">{{wxname}}</span>
                        <span style="color:#1670FF;font-size:12px">切换公众号</span>
                    </div>
                </div>
            </div>
        </div>
    </div>






    <el-dialog title="切换公众号" :visible.sync="changeStudioDialog" :close-on-click-modal="false"	 width="800px" center>
        <div class="chanMain">
            <div class="changeItem" v-for="(item, index) in publicList" :key="index">
                <div class="itemMain" @click="chooseStudio(item)"
                    :class="{ chooseClick: chooseStudioId == item.app_id}">
                    
                    <div class="itemMess">
                        <div class="itemName">
                            <span>{{ item.name }}</span>
                        </div>
                        <div class="itemUser">
                            <span>{{ item.user_name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="changeStudioDialog = false">取 消</el-button>
            <el-button type="primary" @click="surechangeStudio">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script lang="ts" src="./Login.vue.ts"></script>
<style lang="less" scoped>



.login_div{
	width:100%;
	min-height:0;
	height: 0;
	background:#fff
}


.login_code{
	width:100%;
	display:flex;
	align-items: center;
    justify-content: flex-start;
}
.lm_left {
    flex: 1;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #F3D083 0%, #F0D08B 100%);

}

.lm_right {
    flex: 1;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lmr_div {
    width: 480px;
}

.lmrd_action {
    display: flex;
    align-items: center;
    justify-content: flex-start;

}

.lmrda_div {
    font-size: 24px;
    color: #333333;
    line-height: 31px;
    letter-spacing: 3px;
    line-height: 31px;
    cursor: pointer;
}

.lmrda_div:last-child {
    margin-left: 40px;
}

.selectlmrda {
    font-size: 32px;
    color: #1670FF;
    font-weight: bold;
    letter-spacing: 4px;
    line-height: 42px;
}

.lmrd_input {
    width: 400px;
    display: inline-block;
    margin-top: 64px;
}

.lmrdi_txt {
    font-size: 18px;
    color: #666666;
    line-height: 24px;
}

.lmrdi_input {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    border: 1px solid #D5D7DF;
    border-radius: 4px;
}

.lmrdi_input input {
    border: 0px;
    outline: none;
    padding-left: 16px;
    font-size: 18px;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
}

.lmrd_yzm {
    width: 400px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 40px;
}

.lmrdy_left {
    flex: 1;
    margin-right: 20px;
}

.lmrdy_right {
    width: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lmrdy_right img {
    width: 100%;
    height: 80px;
}

.lmrdy_right span {
    font-size: 18px;
    color: #6FAB69;
    line-height: 24px;
    margin-top: 8px;
}

.btnlist {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 76px;
}

.btn_div {
    width: 120px;
    height: 56px;
    background: #1670FF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #FFFFFF;
    cursor: pointer;
}

.loginClass {
    height: 420px;
    width: 100%;
}
.qrcode_img {
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    margin-top: 30px;
}
.qrcode_desc{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
    line-height: 24px;
    margin-top: 40px;
    cursor: pointer;
}
.qrcode_desc_bottom{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 18px;
    line-height: 24px;
    margin-top: 40px;
    cursor: pointer;
    position: absolute;
    right: 30px;
    bottom:0;
}


.itemImg {
    height: 60px;
    width: 60px;
}

.itemImg img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.itemMain {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.itemMess {
    margin-left: 30px;
}

.chanMain {
    height: 500px;
    overflow: auto;
}

.chooseClick {
    border: 1px solid #37DC94;
}
</style>

<style>
    
</style>